<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>统计分析</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css">
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <style>
        :root {
            --primary-color: #4361ee;
            --secondary-color: #3f37c9;
            --success-color: #ef4444;
            --warning-color: #f59e0b;
            --danger-color: #10b981;
            --light-color: #f8f9fa;
            --dark-color: #212529;
            --border-radius: 12px;
            --card-shadow: 0 8px 24px rgba(149, 157, 165, 0.1);
            --transition-speed: 0.3s;
        }

        body {
            background-color: #f0f2f5;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
            color: var(--dark-color);
            line-height: 1.5;
        }

        .stats-container {
            padding: 24px;
            max-width: 1400px;
            margin: 0 auto;
        }

        .page-header {
            margin-bottom: 30px;
            padding: 20px 24px;
            background: white;
            border-radius: var(--border-radius);
            box-shadow: var(--card-shadow);
            display: flex;
            justify-content: space-between;
            align-items: center;
            border: 1px solid rgba(231, 235, 241, 0.8);
        }

        .page-header h2 {
            margin: 0;
            font-size: 24px;
            color: var(--dark-color);
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .page-header h2 i {
            color: var(--success-color);
            font-size: 1.2em;
        }

        .btn-home {
            color: var(--dark-color);
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            padding: 10px 20px;
            border-radius: var(--border-radius);
            background: white;
            border: 1px solid #e0e6ed;
            transition: all var(--transition-speed) ease;
            font-weight: 500;
            font-size: 0.95rem;
        }

        .btn-home:hover {
            background: var(--success-color);
            color: white;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(239, 68, 68, 0.2);
            border-color: var(--success-color);
        }

        .btn-home i {
            margin-right: 8px;
            font-size: 1.1em;
        }

        .query-form {
            margin-bottom: 30px;
            padding: 24px;
            background: white;
            border-radius: var(--border-radius);
            box-shadow: var(--card-shadow);
            border: 1px solid rgba(231, 235, 241, 0.8);
        }

        .query-form .date-group {
            display: flex;
            align-items: flex-end;
            gap: 20px;
            flex-grow: 1;
        }

        .query-form .form-group {
            flex: 1;
            margin: 0;
        }

        .query-form label {
            color: #64748b;
            font-weight: 500;
            margin-bottom: 8px;
            font-size: 0.9rem;
        }

        .query-form .form-control {
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            padding: 12px 16px;
            font-size: 0.95rem;
            transition: all var(--transition-speed) ease;
            background-color: #f8fafc;
            width: 100%;
        }

        .query-form .form-control:focus {
            border-color: var(--success-color);
            box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
            background-color: white;
        }

        .query-form .btn-primary {
            background-color: var(--success-color);
            border: none;
            padding: 12px 24px;
            font-weight: 500;
            border-radius: 8px;
            transition: all var(--transition-speed) ease;
            height: 46px;
            min-width: 120px;
            color: white;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            font-size: 0.95rem;
        }

        .query-form .btn-primary:hover {
            background-color: #dc2626;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(239, 68, 68, 0.2);
        }

        .stats-cards {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 24px;
            margin-bottom: 30px;
        }

        .stats-card {
            background: white;
            padding: 24px;
            border-radius: var(--border-radius);
            box-shadow: var(--card-shadow);
            transition: all var(--transition-speed) ease;
            border: 1px solid rgba(231, 235, 241, 0.8);
            position: relative;
            overflow: hidden;
        }

        .stats-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 12px 24px rgba(149, 157, 165, 0.15);
        }

        .stats-card h3 {
            margin: 0 0 16px 0;
            color: #64748b;
            font-size: 0.95rem;
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .stats-card h3 i {
            font-size: 1.3em;
            color: var(--success-color);
        }

        .stats-card .value {
            font-size: 32px;
            font-weight: 600;
            color: var(--dark-color);
            line-height: 1.2;
            position: relative;
            z-index: 1;
        }

        .stats-card::after {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            width: 100px;
            height: 100px;
            background: linear-gradient(135deg, rgba(239, 68, 68, 0.05), transparent);
            border-radius: 50%;
            transform: translate(30%, -30%);
            z-index: 0;
        }

        .profit { 
            color: #ef4444 !important;
        }

        .loss { 
            color: #10b981 !important;
        }

        .charts-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(600px, 1fr));
            gap: 24px;
            margin-bottom: 30px;
        }

        .chart-box {
            background: white;
            padding: 24px;
            border-radius: var(--border-radius);
            box-shadow: var(--card-shadow);
            border: 1px solid rgba(231, 235, 241, 0.8);
        }

        .chart-box h3 {
            margin: 0 0 20px 0;
            color: var(--dark-color);
            font-size: 18px;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .chart-box h3 i {
            color: var(--success-color);
            font-size: 1.2em;
        }

        .chart {
            width: 100%;
            height: 400px;
            border-radius: 8px;
            position: relative;
        }

        @media (max-width: 768px) {
            .stats-container {
                padding: 16px;
            }
            .page-header {
                padding: 16px;
                flex-direction: column;
                gap: 16px;
                text-align: center;
            }
            .query-form {
                padding: 20px;
            }
            .query-form .date-group {
                flex-direction: column;
                gap: 16px;
            }
            .query-form .btn-primary {
                width: 100%;
                margin-top: 16px;
            }
            .charts-container {
                grid-template-columns: 1fr;
            }
            .chart {
                height: 300px;
            }
            .stats-card .value {
                font-size: 28px;
            }
        }
    </style>
</head>
<body>
    <div class="stats-container">
        <div class="page-header">
            <h2><i class="bi bi-graph-up"></i> 统计分析</h2>
            <a href="${pageContext.request.contextPath}/" class="btn-home">
                <i class="bi bi-house"></i> 返回首页
            </a>
        </div>

        <div class="query-form">
            <form id="queryForm" class="d-flex align-items-end" method="get" action="${pageContext.request.contextPath}/bet/stats">
                <div class="date-group flex-grow-1">
                    <div class="form-group">
                        <label for="startDate">开始日期</label>
                        <input type="date" class="form-control" id="startDate" name="startDate" value="${startDate}" required>
                    </div>
                    <div class="form-group">
                        <label for="endDate">结束日期</label>
                        <input type="date" class="form-control" id="endDate" name="endDate" value="${endDate}" required>
                    </div>
                </div>
                <div class="btn-group">
                    <button type="submit" class="btn btn-primary">
                        <i class="bi bi-search"></i> 查询
                    </button>
                </div>
            </form>
        </div>

        <div class="stats-cards">
            <div class="stats-card">
                <h3><i class="bi bi-wallet2"></i> 总投注金额</h3>
                <div class="value">
                    ￥<fmt:formatNumber value="${stats.totalBetAmount}" pattern="#,##0.00"/>
                </div>
            </div>
            <div class="stats-card">
                <h3><i class="bi bi-graph-up-arrow"></i> 总收益</h3>
                <div class="value ${stats.totalProfit >= 0 ? 'profit' : 'loss'}">
                    ￥<fmt:formatNumber value="${stats.totalProfit}" pattern="#,##0.00"/>
                </div>
            </div>
            <div class="stats-card">
                <h3><i class="bi bi-dice-6"></i> 总投注次数</h3>
                <div class="value">${stats.totalBetCount}</div>
            </div>
            <div class="stats-card">
                <h3><i class="bi bi-bullseye"></i> 命中率</h3>
                <div class="value ${stats.hitRate >= 50 ? 'profit' : 'loss'}">
                    <fmt:formatNumber value="${stats.hitRate}" pattern="#.##"/>%
                </div>
            </div>
        </div>

        <div class="charts-container">
            <div class="chart-box">
                <h3><i class="bi bi-graph-up"></i> 每日收益曲线</h3>
                <div id="profitChart" class="chart"></div>
            </div>
            <div class="chart-box">
                <h3><i class="bi bi-pie-chart"></i> 结果分布</h3>
                <div id="resultChart" class="chart"></div>
            </div>
        </div>
    </div>

    <script>
        // 初始化图表实例
        const profitChart = echarts.init(document.getElementById('profitChart'));
        const resultChart = echarts.init(document.getElementById('resultChart'));

        // 准备图表数据（使用 JSON.parse 确保数据格式正确）
        const chartData = {
            dailyProfitDates: JSON.parse('${dailyProfitDates}'),
            dailyProfitValues: JSON.parse('${dailyProfitValues}'),
            resultDistribution: JSON.parse('${resultDistribution}')
        };

        function initCharts() {
            // 每日收益曲线图配置
            const profitOption = {
                title: {
                    text: ''
                },
                tooltip: {
                    trigger: 'axis',
                    formatter: function(params) {
                        return params[0].name + '<br/>收益: ￥' + params[0].value.toFixed(2);
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    top: '5%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: chartData.dailyProfitDates,
                    axisLabel: {
                        rotate: 45,
                        color: '#64748b',
                        fontSize: 12
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#e2e8f0'
                        }
                    },
                    axisTick: {
                        show: false
                    }
                },
                yAxis: {
                    type: 'value',
                    name: '收益',
                    nameTextStyle: {
                        color: '#64748b',
                        fontSize: 12
                    },
                    axisLabel: {
                        formatter: '￥{value}',
                        color: '#64748b',
                        fontSize: 12
                    },
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        lineStyle: {
                            color: '#e2e8f0',
                            type: 'dashed'
                        }
                    }
                },
                series: [{
                    name: '每日收益',
                    type: 'line',
                    data: chartData.dailyProfitValues,
                    smooth: true,
                    symbol: 'circle',
                    symbolSize: 8,
                    itemStyle: {
                        color: function(params) {
                            return params.value >= 0 ? '#ef4444' : '#10b981';
                        },
                        borderWidth: 2,
                        borderColor: '#fff'
                    },
                    lineStyle: {
                        width: 3,
                        color: function(params) {
                            return params.value >= 0 ? '#ef4444' : '#10b981';
                        }
                    },
                    areaStyle: {
                        opacity: 0.15,
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: '#ef4444'
                        }, {
                            offset: 1,
                            color: 'rgba(239, 68, 68, 0.03)'
                        }])
                    }
                }]
            };

            // 结果分布饼图配置
            const resultOption = {
                title: {
                    text: ''
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{b}: {c} ({d}%)',
                    backgroundColor: 'rgba(255, 255, 255, 0.95)',
                    borderColor: '#e2e8f0',
                    borderWidth: 1,
                    textStyle: {
                        color: '#64748b'
                    },
                    padding: [8, 12]
                },
                legend: {
                    orient: 'vertical',
                    right: '5%',
                    top: 'center',
                    textStyle: {
                        color: '#64748b',
                        fontSize: 12
                    },
                    itemGap: 12,
                    icon: 'circle'
                },
                color: ['#ef4444', '#f97316', '#a855f7', '#22c55e', '#10b981'],
                series: [{
                    name: '结果分布',
                    type: 'pie',
                    radius: ['45%', '75%'],
                    center: ['40%', '50%'],
                    avoidLabelOverlap: true,
                    itemStyle: {
                        borderRadius: 10,
                        borderColor: '#fff',
                        borderWidth: 2
                    },
                    label: {
                        show: true,
                        position: 'outside',
                        formatter: '{b}: {d}%',
                        fontSize: 14,
                        color: '#64748b'
                    },
                    labelLine: {
                        show: true,
                        length: 15,
                        length2: 10,
                        smooth: true
                    },
                    data: chartData.resultDistribution
                }]
            };

            profitChart.setOption(profitOption);
            resultChart.setOption(resultOption);
        }

        // 窗口大小改变时重绘图表
        window.addEventListener('resize', function() {
            profitChart.resize();
            resultChart.resize();
        });

        // 初始化图表
        initCharts();
    </script>
</body>
</html> 